<template>
  <div class="paste-example p-6">
    <h1 class="text-2xl font-bold mb-4">Excel式粘贴功能示例</h1>
    
    <div class="mb-6 space-y-2">
      <p class="text-gray-600">
        这个示例展示了 Canvas Table 的 Excel 式粘贴功能。
      </p>
      <div class="bg-blue-50 border border-blue-200 rounded p-4">
        <h3 class="font-semibold mb-2">试试以下操作：</h3>
        <ol class="list-decimal list-inside space-y-1 text-sm">
          <li>从 Excel 或其他表格复制多行数据</li>
          <li>点击表格底部的单元格（如最后一行）</li>
          <li>按 Ctrl+V 粘贴数据</li>
          <li>观察表格如何自动新增行来容纳粘贴的数据</li>
          <li>点击"保存"按钮查看哪些是新增的行，哪些是修改的单元格</li>
        </ol>
      </div>
    </div>
    
    <div class="border border-gray-300 rounded overflow-hidden">
      <canvas-table
        ref="tableRef"
        :columns="columns"
        :data="data"
        :options="tableOptions"
        @cell-change="handleCellChange"
        style="height: 400px"
      />
    </div>
    
    <div class="mt-4 flex gap-4">
      <button 
        @click="saveChanges" 
        class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
      >
        保存更改
      </button>
      <button 
        @click="rollback" 
        class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600"
      >
        撤销所有更改
      </button>
      <button 
        @click="addTestData" 
        class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
      >
        添加测试数据到剪贴板
      </button>
    </div>
    
    <div v-if="changesSummary" class="mt-4 p-4 bg-gray-50 rounded">
      <h3 class="font-semibold mb-2">更改摘要：</h3>
      <pre class="text-sm">{{ changesSummary }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CanvasTable from '../CanvasTable.vue'

// 表格引用
const tableRef = ref(null)
const changesSummary = ref('')

// 列配置
const columns = ref([
  {
    field: 'id',
    title: 'ID',
    width: 80,
    editable: false  // ID 不可编辑
  },
  {
    field: 'name',
    title: '姓名',
    width: 120,
    editable: true
  },
  {
    field: 'age',
    title: '年龄',
    width: 80,
    editable: true,
    editType: 'number'
  },
  {
    field: 'email',
    title: '邮箱',
    width: 200,
    editable: true,
    editType: 'email'
  },
  {
    field: 'department',
    title: '部门',
    width: 150,
    editable: true
  },
  {
    field: 'created_at',
    title: '创建时间',
    width: 180,
    editable: false,
    formatter: (value) => {
      if (!value) return ''
      return new Date(value).toLocaleString()
    }
  }
])

// 初始数据 - 只有5行
const data = ref([
  { id: 1, name: '张三', age: 28, email: 'zhangsan@example.com', department: '技术部', created_at: new Date('2024-01-01') },
  { id: 2, name: '李四', age: 32, email: 'lisi@example.com', department: '市场部', created_at: new Date('2024-01-02') },
  { id: 3, name: '王五', age: 25, email: 'wangwu@example.com', department: '人事部', created_at: new Date('2024-01-03') },
  { id: 4, name: '赵六', age: 30, email: 'zhaoliu@example.com', department: '财务部', created_at: new Date('2024-01-04') },
  { id: 5, name: '钱七', age: 27, email: 'qianqi@example.com', department: '技术部', created_at: new Date('2024-01-05') }
])

// 表格选项
const tableOptions = {
  showRowNumber: true,
  editable: true,
  multiSelect: true,
  columnResize: true,
  keyboardNavigation: true,
  copyPaste: true,
  undoRedo: true
}

// 处理单元格变化
const handleCellChange = (event) => {
  console.log('单元格变化:', event)
}

// 保存更改
const saveChanges = () => {
  const table = tableRef.value?.getTable()
  if (!table) return
  
  const changes = table.getChanges()
  console.log('所有更改:', changes)
  
  let summary = ''
  
  // 修改的数据
  if (changes.modified.length > 0) {
    summary += `修改的单元格 (${changes.modified.length} 个):\n`
    changes.modified.forEach(change => {
      summary += `  - 行 ${change.row + 1}, 列 "${change.field}": ${change.oldValue} → ${change.newValue}\n`
    })
  }
  
  // 新增的行
  if (changes.inserted.length > 0) {
    summary += `\n新增的行 (${changes.inserted.length} 行):\n`
    changes.inserted.forEach(item => {
      summary += `  - 行 ${item.index + 1}: ${JSON.stringify(item.data)}\n`
    })
  }
  
  // 删除的行
  if (changes.deleted.length > 0) {
    summary += `\n删除的行 (${changes.deleted.length} 行):\n`
    changes.deleted.forEach(item => {
      summary += `  - 行 ${item.index + 1}: ${JSON.stringify(item.data)}\n`
    })
  }
  
  if (!summary) {
    summary = '没有任何更改'
  }
  
  changesSummary.value = summary
  
  // 模拟保存到数据库
  setTimeout(() => {
    alert('更改已保存！')
    table.commit()  // 提交更改，清除变更状态
    changesSummary.value = ''
  }, 1000)
}

// 撤销所有更改
const rollback = () => {
  const table = tableRef.value?.getTable()
  if (!table) return
  
  table.rollback()
  changesSummary.value = ''
  alert('已撤销所有更改')
}

// 添加测试数据到剪贴板
const addTestData = async () => {
  // 创建测试数据（Tab分隔的文本）
  const testData = [
    ['陈八', '35', 'chenba@example.com', '销售部'].join('\t'),
    ['周九', '29', 'zhoujiu@example.com', '技术部'].join('\t'),
    ['吴十', '31', 'wushi@example.com', '市场部'].join('\t'),
    ['郑十一', '26', 'zhengshiyi@example.com', '人事部'].join('\t')
  ].join('\n')
  
  try {
    await navigator.clipboard.writeText(testData)
    alert('测试数据已复制到剪贴板！\n现在你可以点击表格最后一行的任意单元格，然后按 Ctrl+V 粘贴。')
  } catch (err) {
    console.error('复制失败:', err)
    alert('复制失败，请检查浏览器权限')
  }
}
</script>

<style scoped>
.paste-example {
  max-width: 1200px;
  margin: 0 auto;
}
</style> 